Estoy tratando de lograr este diseño, pero cuando lo intento al principio parece estar bien, pero cuando deslizas, la diapositiva se apaga. Quiero que el ancho de la diapositiva activa sea del 50% y otros del 25% en cualquier tamaño de ventana, excepto en dispositivos móviles.

Mi scss se ve así. (Intenté cambiar el ancho de la diapositiva activa al 50% y otras al 25%)

 .newsSlider { .swiper-slide { overflow: hidden; transition: 0.3s ease-in-out; width: 25%; .news-item { transition: 0.3s ease-in-out; width: 400px; height: 500px; overflow: hidden; position: relative; .news-floater { position: absolute; left: 0; bottom: 3rem; color: #fff; width: 100%; padding: 0 1rem 0 2rem; pointer-events: none; z-index: 2; .title { background-color: #cb2828; font-weight: bold; font-size: 1.3rem; text-transform: uppercase; } .news-title { font-size: 1.5rem; font-weight: bold; } .news-text { position: relative; } } img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.2) translateX(0); transition: 5s ease-in-out; } } &.swiper-slide-active { width: 50%; .news-item { width: 100%; transition: 0.3s ease-in-out; .news-floater { pointer-events: all; } img { transform: scale(1.3) translateX(20px); } } } }

}

Aquí está la demostración: https://codepen.io/Xteripus/pen/yLpbJmQ